import { useEffect, useState } from "react";
import MyEditor from "../MyEditor/MyEditor";
import { Button, Space } from "antd";
import { electronApiType } from "../../../../preload";
type OmitFirstArg<F> = F extends (x: any, ...args: infer P) => infer R
  ? (...args: P) => R
  : never;
declare global {
  interface Window {
    electronAPI: {
      [key in keyof electronApiType]: OmitFirstArg<electronApiType[key]>;
    };
  }
}

export const Index = () => {
  const [show, setShow] = useState(false);
  const [text, setText] = useState("");
  useEffect(() => {
    return () => {
      window.electronAPI.destroy();
    };
  }, []);
  return (
    <div>
      <Space>
        <Button
          type="primary"
          onClick={() => {
            setShow((e) => {
              if (e) {
                //close
                setText("");
              } else {
                //start
                window.electronAPI.init();
              }
              return !e;
            });
          }}
        >
          {show ? "关闭" : "启动"}
        </Button>
        <Button
          onClick={(e) => {
            window.electronAPI.write(text);
          }}
          type="primary"
        >
          生成文件
        </Button>
        <Button
          onClick={() => {
            window.electronAPI.openDevFolder();
          }}
        >
          打开文件夹
        </Button>
      </Space>
      <div className="mask" style={{ display: show ? "block" : "none" }}>
        <MyEditor html={text} setHtml={(e) => setText(e)} />
      </div>
    </div>
  );
};
